<template>
    <div class="clearfix register">
        <div class="mark"></div>

        <div class="content">
          <div class="logo-wrap">
            <img src="../../../imgs/logo.png" alt="" width="100%" height="100%">
          </div>
          <!-- 注册内容盒子 S -->
          <div class="rigister-wrap">
            <form action="">
              <div class="phone input-wrap">
                <i class="iconfont">&#xe640;</i>
                <input placeholder="请输入手机号" v-model="phone" type="text">
              </div>
              <div class="verification-code input-wrap">
                <i class="iconfont">&#xe63f;</i>
                <input placeholder="请输入验证码" v-model="code" type="text">
                <button type="button" @click="getCode">
                  {{ codeTip }}{{ codeLoading ? '(' + sec + ')' : '' }}
                </button>
              </div>
              <div class="button-warp">
                <button type="button" @click="bind">注册</button>
              </div>
            </form>
          </div>
          <!-- 注册内容盒子 E -->
        </div>
    </div>
</template>
<script>
  import * as api from 'api';
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        code: '',
        phone: '',
        codeTip: '获取验证码',
        sec: 60,
        codeLoading: ''
      }
    },

    created () {
    },

    computed: {
      ...mapState({
        route: state => state.route,
        path: state => state.route.path,
        role: state => state.userInfo.role,
        userInfo: state => state.userInfo
      })
    },

    methods: {
      getCode () {
        if (this.codeLoading) {
          return;
        }
        if (this.phone.trim() === '') {
          this.Toast('请输入手机号码');
          return;
        } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(this.phone.trim())) {
          this.Toast('请输入正确的手机号码');
          return;
        }
        api.registerCode({
          'telphoneNum': this.phone,
          'openId': this.userInfo.openId
        })
          .then(res => {
            this.codeLoading = true;
            this.codeTip = '重新获取'
            console.log(res);
            let tiemr = setInterval(() => {
              if (this.sec === 0) {
                clearInterval(tiemr);
                this.codeLoading = false;
                this.sec = 60;
              }
              this.sec -= 1;
            }, 1000)
          })
      },

      bind () {
        if (this.phone.trim() === '') {
          this.Toast('请输入手机号码');
          return;
        } else if (!/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[57])[0-9]{8}$/.test(this.phone.trim())) {
          this.Toast('请输入正确的手机号码');
          return;
        } else if (this.code.trim() === '') {
          this.Toast('请输入验证码');
          return;
        }
        console.log(this.userInfo.openId);
        api.registerOper({
          'telphoneNum': this.phone,
          'validate': this.code,
          'openid': this.userInfo.openId
        })
          .then(res => {
            this.Toast('注册成功');
            this.$store.dispatch('getUserInfo');
            this.$router.go(-1);
          })
          .catch(err => {
            console.log(err);
          })
      }
    }
  }
</script>
<style scoped="" lang="scss">
  @import '../../../styles/user/registerOper/index.scss';
</style>
